<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12" v-if="guildInfo">
          <div class="text-h6">{{ guildInfo.name }}</div>
        </div>
        <div class="col-12" v-if="memberList">
          <q-list>
            <q-item v-for="(member, key) in memberList"
                    :key="key"
                    clickable @click="$router.push(`/guild/${member.username}/box`)">
              <q-item-section>
                <q-item-label>{{ member.nickname }}</q-item-label>
                <q-item-label caption>@{{ member.username }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import Guild from "src/lib/api/guild";

export default {
  name: "Guild",
  data: function () {
    return {
      guildInfo: null,
      memberList: null
    };
  },
  computed: {
    account: {
      get() {
        return this.$store.state.account;
      }
    }
  },
  async mounted() {
    this.$q.loading.show();
    try {
      this.guildInfo = await Guild.info(this.account.guild);
      this.memberList = await Guild.list();
    } catch {}
    this.$q.loading.hide();
  }
}
</script>

<style scoped>

</style>
